<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户信息</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="bg"></div>
<div id="main">
    <div id="user-info">
        <div>
            <p><span>身份码</span>:<span></span></p>
            <p><span>昵称  </span>:<span></span></p>
            <p><span>手机号</span>:<span></span></p>
            <p id="btns">
                <input type="button" value="开启摄像头">
                <input type="button" value="拍照">
            </p>
        </div>
        <div id="_display">
            <video id="video" autoplay width="300px" height="300px"></video>
            <canvas id="canvas" width="300px" height="300px"></canvas>
            <img id="targetImg" src="" alt=""/>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    (() => {
        let returnValue = location.search.split("=")[1];
        let token = returnValue.substr(0, returnValue.indexOf("&"))
        let uuid = returnValue.split("&")[1]
        let nameHTML = null;
        // tokenVerify()
        // function tokenVerify() {
        //     $.post("/verify/tokenVerify", {"token": token}, (res) => {
        //         console.log(res)
        //     })
        // }
        var tel = "123";
        var uname = "用户";
        var uid = "123"
        var img = "https://img0.baidu.com/it/u=734784206,3880933462&fm=253&fmt=auto&app=120&f=JPEG?w=483&h=500"
        faceId()

        function faceId() {
            $.ajax({
                url: "/sql/queryFaceToken",
                type: "POST",
                async: false,
                beforeSend: function (request) {
                    request.setRequestHeader("token", token);
                },
                data: {
                    uuid: uuid
                },
                success: function (res) {
                    let dataNew = res.data;
                    uid = dataNew[0].uuid
                    tel = dataNew[0].tel
                    uname = dataNew[0].uname;
                    // document.querySelector('#user-info p:nth-child(1) span:last-child').innerHTML = res.json.timestamp;
                    console.log(res)
                    if (dataNew[0].faceToken != null) {
                        img = 'img/' + dataNew[0].faceToken + '.png'
                    } else {
                        img = 'https://img0.baidu.com/it/u=734784206,3880933462&fm=253&fmt=auto&app=120&f=JPEG?w=483&h=500'
                    }
                }
            })
        }

        // let data = {
        //     "uid": 154338944,
        //     "uname": "锰锌",
        //     "tel": 12345678912,
        //     "imgURL": "https://img0.baidu.com/it/u=734784206,3880933462&fm=253&fmt=auto&app=120&f=JPEG?w=483&h=500"
        // };

        document.querySelector('#user-info p:nth-child(1) span:last-child').innerHTML = uid;
        document.querySelector('#user-info p:nth-child(2) span:last-child').innerHTML = uname;
        document.querySelector('#user-info p:nth-child(3) span:last-child').innerHTML = tel;
        let texture = document.querySelector('#targetImg');
        let cameraBtn = document.querySelector('#btns input[value="开启摄像头"]');
        let takePhotoBtn = document.querySelector('#btns input:last-child');
        let mediaStreamTrack = null;
        let video = document.querySelector('#video');
        let flag = false;

        // let str = ''
        // texture.setAttribute('src',str);
        texture.setAttribute('src', img);

        cameraBtn.onclick = function () {
            flag = !flag;
            cameraBtn.value = flag ? "关闭摄像头" : "开启摄像头";
            if (flag) {	// 开启
                texture.style = "display: none";
                video.style = "display: block";
                openMedia();
            } else {		// 关闭
                texture.style = "display: block";
                video.style = "display: none";
                closeMedia();
            }
        }

        takePhotoBtn.onclick = function () {
            takePhoto();
        }

        // 开启摄像头
        function openMedia() {
            let constraints = {
                video: {width: 300, height: 300},
                audio: false
            };
            //获得video摄像头
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            promise.then((mediaStream) => {
                mediaStreamTrack = mediaStream.getVideoTracks()
                video.srcObject = mediaStream;
                video.play();
            });
        }

        // 拍照
        function takePhoto() {
            if (!flag) {
                alert("请打开摄像头后拍照");
                return false;
            }
            flag = !flag;
            cameraBtn.value = "开启摄像头";
            texture.style = "display: block";
            video.style = "display: none";

            let v = document.getElementById('video');
            let canvas = document.getElementById('canvas');
            let ctx = canvas.getContext('2d');
            ctx.drawImage(v, 0, 0, 300, 300);
            let img = document.getElementById('canvas').toDataURL()
            console.log(img)
            texture.src = img;
            closeMedia();
            //上传
            $.ajax({
                //人脸数据更新
                url: "/face/faceDataUpdate",
                type: "POST",
                beforeSend: function (request) {
                    request.setRequestHeader("token", token);
                },
                data: {
                    "base64": img.split(",")[1],
                    "uuid": uuid,
                },
                success: function (res) {
                    console.log(res)
                    // alert(data.success ? "上传成功" : "上传失败");
                }
            });
        }

        // 关闭摄像头
        function closeMedia() {
            let stream = video.srcObject;
            let tracks = stream.getTracks();
            tracks.forEach(function (track) {
                track.stop();
            });
            video.srcObject = null;
        }
    })
    ();

</script>

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
        vertical-align: top;
        box-sizing: border-box;
    }

    html, body {
        width: 100%;
        height: 100%;
    }

    #main {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .bg {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        background-image: url('https://img1.baidu.com/it/u=1580230328,1888348986&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: -1;
        opacity: 0.7;
    }

    #user-info {
        width: 1000px;
        height: 500px;
        background-color: rgba(10, 93, 151, 0.3);
        border-radius: 5px;
        padding: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    #user-info p {
        width: 400px;
        border-bottom: 1px solid #FFF;
        display: flex;
        padding: 30px 0 10px 0;
        font: 21px/100% "times new roman", "楷体";
        color: rgb(255, 255, 255);

    }

    #user-info #btns {
        border-bottom: 1px solid rgba(0, 0, 0, 0);
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    #btns input {
        border: 0;
        width: 120px;
        height: 40px;
        margin: 0 30px;
        color: rgb(0, 175, 227);
        cursor: pointer;
        border-radius: 2px;
        font: 18px/100% "楷体";

    }

    #user-info p span:first-child {
        flex: 0.25;
        text-align: right;
        font-weight: bold;
        text-align-last: justify;
        text-align: justify;
        text-justify: distribute-all-lines;
    }

    #user-info p span:last-child {
        flex: 0.75;
    }

    #_display {
        position: relative;
        margin: 0 0 0 100px;
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
        user-select: none;
    }

    #video {
        position: absolute;
        display: none;
        background-color: rgb(0, 175, 227);
        z-index: 5;
    }

    #canvas {
        position: absolute;
        display: none;
        z-index: 100;
    }

    #targetImg {
        position: absolute;
        width: 300px;
        height: 300px;
        z-index: 10;
    }

</style>
</html>
